<template>
    <transition name="move">
        <div class="add-content" v-show="visible">
            <i class="el-icon-close icon" @click="close"></i>
            <Crumb name="Contact"></Crumb>
            <div class="search">
                <el-button type="primary" size="small" class="input" @click="clear()
                                                                        dialogVisible=true">Add Contact
                </el-button>
            </div>
            <div class="content">
                <div class="table-wrapper">
                    <el-table
                            :data="contactList"
                            border
                            stripe
                            style="width: 100%">
                        <el-table-column
                               type="index"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="contactName"
                                label="Name"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="email"
                                label="email"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="jobPosition"
                                label="job Position"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="sex"
                                label="sex"
                        >
                        </el-table-column>

                        <el-table-column
                                label="Operate">
                            <template slot-scope="scope">
                                <el-button icon="el-icon-edit" type="text" @click="edit(scope.row)" size="small">
                                    Edit
                                </el-button>
                                <el-button icon="el-icon-delete" type="text" @click="deleteContact(scope.row)" size="small">
                                    Delete
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>
            <el-dialog
                    modal-append-to-body
                    append-to-body
                    title="Contact"
                    :visible.sync="dialogVisible"
                    width="80%"
            >
                <el-form ref="form" :model="contact" label-width="150px" :rules="rule">
                    <el-form-item label="Name" prop="contactName">
                        <el-input v-model="contact.contactName" placeholder="Name" size="small"
                                  class="my-input"></el-input>
                    </el-form-item>
                    <el-form-item label="Sex">
                        <el-select v-model="contact.sex" placeholder="Sex" size="small" class="my-input">
                            <el-option
                                    v-for="item in ['Male','Female']"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Job Position" prop="jobPosition">
                        <el-input v-model="contact.jobPosition" placeholder="Job Position" size="small"
                                  class="my-input"></el-input>
                    </el-form-item>
                    <el-form-item label="Main Job Content">
                        <el-input v-model="contact.mainJobContent" type="textarea" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="Email">
                        <el-input v-model="contact.email" placeholder="Email" class="my-input" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="Phone">
                        <el-button type="success" icon="el-icon-plus" @click="contact.customerContactPhones.push({phone:''})">Add
                        </el-button>
                        <div v-for="item in contact.customerContactPhones" :key="item">
                            <div>
                                <el-input v-model="item.phone" class="my-input" size="small"></el-input>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="submitForm">Submit</el-button>
              </span>
            </el-dialog>
        </div>
    </transition>
</template>

<script>
    import {getContactList, addContactMan, modContactMan} from "../../api/customer";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "contact",
        props: {
            visible: Boolean,
            customerId: Number
        },
        data() {
            return {
                dialogVisible: false,
                contactList: [],
                contact: {
                    contactName: '',
                    sex: '',
                    jobPosition: '',
                    mainJobContent: '',
                    email: '',
                    customerContactPhones: [{phone: ''}]
                },
                rule: {
                    contactName: [{required: true}],
                    jobPosition: [{required: true}],
                }

            }
        },
        methods: {
            async deleteContact(r){
                if (window.confirm("Delete this contact")) {
                    //do something
                }
            },
            submitForm(){
                this.$refs.form.validate(async valid=>{
                    if(valid) {
                        const {contactId,contactName,sex,jobPosition,mainJobContent,email,customerContactPhones} = this.contact;
                        let phones = customerContactPhones.map(item=>{
                            return item.phone
                        });
                        phones = phones.join(',');
                        if(!contactId) {
                            const {status,msg} = await addContactMan({
                                customerId:this.customerId,
                                contactName,
                                sex,
                                jobPosition,
                                mainJobContent,
                                email,
                                phones
                            });
                            if (status === ERROR_OK) {
                                this.getContactList();
                                this.clear();
                                this.dialogVisible = false
                            } else{
                                this.$message.error(msg)
                            }
                        } else {
                            const {status,msg} = await modContactMan({
                                customerId:this.customerId,
                                contactId,
                                contactName,
                                sex,
                                jobPosition,
                                mainJobContent,
                                email,
                                phones
                            });
                            if (status === ERROR_OK) {
                                this.clear();
                                this.dialogVisible = false
                            } else{
                                this.$message.error(msg)
                            }
                        }
                    }
                })
            },
            async getContactList() {
                const {status, data} = await getContactList(this.customerId);
                if (status === ERROR_OK) {
                    this.contactList = data;
                } else {
                    this.contactList = []
                }
            },
            edit(contact){
              contact.customerContactPhones = contact.customerContactPhones.map(item => {
                  return {phone:item.phone}
              });
              this.contact = contact;
              this.dialogVisible = true
            },
            close() {
                this.$emit('close')
            },
            clear() {
                this.contact = {
                    contactName: '',
                    sex: '',
                    jobPosition: '',
                    mainJobContent: '',
                    email: '',
                    customerContactPhones: [{phone: ''}]
                }
            }
        },
        watch: {
            customerId() {
                this.getContactList()
            }
        }
    }
</script>

<style scoped lang="scss">
    .add-content {
        position: fixed;
        overflow: scroll;
        padding: 20px;
        z-index: 101;
        top: 0;
        right: 10px;
        bottom: 0;
        left: 10px;
        background: #fff;
        .search {
            text-align: left;
            margin: 20px 0;
        }
        .icon {
            position: absolute;
            font-size: 30px;
            right: 30px;
            top: 10px;
            font-weight: 800;
            color: #409eff;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            &:hover {
                transform: rotate(90deg);
            }
        }
        &.move-enter-active, &.move-leave-active {
            transition: all 0.5s ease;
        }
        &.move-enter, &.move-leave-to {
            transform: translateX(100%);
        }
    }
</style>